<template>
	<view class="home">
		<!-- <back></back> -->
		<view class="top u-flex u-row-between">
			<view class="title">个人信息修改</view>
		</view>
		<view class="item it_flex" @click="upshopImg">
			<view class="it_left">店铺头像</view>
			<image :src="avatar?avatar:'../../static/logo.png'" mode="" class="haedimg"></image>
		</view>
		<view class="item it_flex">
			<view class="it_left">店铺昵称</view>
			<input type="text" placeholder="请输入昵称" v-model="shopname"/>
		</view>
		<view class="item it_flex">
			<view class="it_left">手机号</view>
			<input type="number" maxlength="11" placeholder="请输入手机号" v-model="mobile"/>
		</view>
		<view class="item it_flex">
			<view class="it_left">联系人</view>
			<input type="text" placeholder="请输入联系人" v-model="sendName"/>
		</view>
		<view class="item it_flex">
			<view class="it_left">地址</view>
			<input type="text" placeholder="请输入地址" v-model="sendAddr"/>
		</view>
		<view class="item">
			<view class="it_left">简介</view>
			<textarea name="" id="" cols="30" rows="10" v-model="bio"></textarea>
		</view>
		<view class="add btn u-flex-center" @click="getSubmit()">确认修改</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				avatar:"",
				shopname:"",
				mobile:"",
				sendName:"",
				sendAddr:"",
				bio:""
			}
		},
		onReady() {
			this.$u.post('/api/shop/shop_details', {}).then(res => {
				if (res.code == 1) {
					this.avatar = res.data.avatar
					this.shopname = res.data.shopname
					this.mobile = res.data.mobile
					this.sendName = res.data.sendName
					this.sendAddr = res.data.sendAddr
					this.bio = res.data.bio
				}
			})
			
		},
		methods:{
			upshopImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						if (res.tempFilePaths.length) {
							uni.uploadFile({
								url: 'https://apishop.qiancdj.com/api/common/upload', //仅为示例，非真实的接口地址
								filePath: res.tempFilePaths[0],
								name: 'file',
								formData: {
									'user': 'test'
								},
								success: (res) => {
									this.avatar = JSON.parse(res.data).data.fullurl
								}
							});
						}
					}
				});
			},
			getSubmit(){
				this.$u.post('/api/shop/edit_shop_details', {
					avatar:this.avatar,
					shopname:this.shopname,
					mobile:this.mobile,
					sendName:this.sendName,
					sendAddr:this.sendAddr,
					bio:this.bio
				}).then(res => {
					if (res.code == 1) {
						uni.showModal({
							title:'修改成功',
							showCancel:false,
							// success() {
							// 	uni.navigateBack({
							// 		delta:1
							// 	})
							// }
						})
						this.$u.post('/api/shop/shop_details', {}).then(res => {
							if (res.code == 1) {
								this.avatar = res.data.avatar
								this.shopname = res.data.shopname
								this.mobile = res.data.mobile
								this.sendName = res.data.sendName
								this.sendAddr = res.data.sendAddr
								this.bio = res.data.bio
							}
						})
					}
				})
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		padding: 0 33rpx;
		box-sizing: border-box;
	}
</style>
<style lang="scss" scoped>
	.top {
		padding: 30rpx 0;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}

		.radius {
			width: 32rpx;
			height: 32rpx;
			border-radius: 50%;
			margin-right: 10rpx;
			border: 1rpx solid #888;
		}

		.rad_css {
			background: #606DCE;
			border: 1rpx solid #606DCE;
		}

		.grey {
			color: #333;
			font-size: 28rpx;
		}
	}
	.haedimg{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
	.it_flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item_pad_bot {
		padding-bottom: 10rpx !important;
	}

	.item {
		padding: 32rpx 30rpx;
		background: #fff;
		font-size: 28rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;

		.it_left {
			font-weight: bold;
			color: #222;
		}

		input {
			font-size: 28rpx;
			text-align: right;
		}

		.it_right {
			display: flex;
			align-items: center;

			text {
				color: #222;
			}

			.it_lef_img {
				width: 10rpx;
				height: 20rpx;
				margin-left: 10rpx;
			}

			.it_rig_img {
				width: 220rpx;
				height: 220rpx;
				border-radius: 20rpx;
				margin-right: 10rpx;
				margin-bottom: 10rpx;
			}
		}

		.it_right_duo {
			border-bottom: 1rpx solid #DFDFDF;

			&:last-child {
				border: none;
			}
		}

		.it_tit {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 30rpx;
			margin-bottom: 30rpx;
			border-bottom: 1rpx solid #F5F5F5;

			.it_grey {
				font-size: 28rpx;
				color: #888;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 10rpx;
				}
			}

			input {
				font-size: 28rpx;
				font-weight: bold;
				text-align: left;
			}
		}

		.it_specs {
			color: #222;
			display: flex;
			font-size: 24rpx;
			align-items: center;
			padding: 10rpx 24rpx;
			background: #F5F5F5;
			border-radius: 26rpx;
			margin-right: 30rpx;
			margin-bottom: 20rpx;

			.it_sp_line {
				width: 2rpx;
				height: 24rpx;
				margin: 0 20rpx 0 24rpx;
			}

			.it_sp_cha {
				width: 20rpx;
				height: 20rpx;
			}

			.it_sp_plus {
				width: 20rpx;
				height: 20rpx;
				margin-right: 20rpx;
			}

			.it_sp_gre {
				color: #606DCE;
			}
		}

		.it_specs input {
			flex: 1;
			max-width: 60rpx;
		}

		.it_pri {
			font-size: 24rpx;
			color: #222;
			padding: 10rpx 48rpx;
			background: #F5F5F5;
			border-radius: 26rpx;
			margin-right: 30rpx;
		}

		.it_ban {
			width: 50%;
			padding: 30rpx 0;

			input {
				flex: 1;
				text-align: left;
				margin-left: 20rpx;
			}
		}
	}

	.add {
		width: 200rpx;
		height: 60rpx;
		font-size: 28rpx;
		color: #FFF;
		margin: 0 auto;
		margin-top: 30rpx;
		background: linear-gradient( 98deg, #5D64CA 0%, #6F9BDF 100%);
		border-radius: 40rpx;
	}

	.btn {
		width: 630rpx;
		height: 80rpx;
		margin-top: 157rpx;
	}

	.layer {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.layer-content {}

	/* 浮层内容 */
	.confirm-bar {
		position: fixed;
		bottom: 600rpx;
		left: 0;
		width: 750rpx;
	}

	.line-height-80 {
		height: 80rpx;
		line-height: 80rpx;
	}

	.padding-lr-30 {
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.bg-ff {
		background: #fff;
	}

	.border-bottom-ed {
		border-bottom: 1rpx solid #ededed;
	}

	.flex {
		display: flex;
	}

	.align-center {
		align-items: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.picker-view {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 600rpx;
		background: #fff;
	}

	.item-pircker {
		line-height: 80rpx;
		height: 80rpx;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	textarea{
		margin-top: 20rpx;
		font-size: 28rpx;
		width: 100%;
	}
</style>